<template>
	<div class="wrap">
		<div class="title">{{ title }}</div>
		<div class="progress-wrapper" v-for="(item, index) in sortedChartData" :key="index" v-if="sortedChartData.length > 0">
			<span class="index-square" :style="getIndexStyle(index)">{{ index + 1 }}</span>
			<div class="progress-container">
				<div class="progress-text">
					<span class="label">{{ item.Name }}</span>
					<span class="percentage">{{ title.includes('活跃软件') ? formatDuration(item.Count) : item.Count }}</span>	<!-- 这里的写法应该修改，最好是多一个参数 -->
				</div>
				<el-progress :percentage="getPercentage(item.Count)" :stroke-width="4" :show-text="false"
					:style="getProgressStyle(index)" />
			</div>
		</div>
		<div class="el-table__empty-block" v-if="!sortedChartData || sortedChartData.length === 0"><span class="el-table__empty-text">暂无数据</span></div>
	</div>
</template>

<script>
import { formatDuration } from '@/utils/index.js'

export default {
	name: 'CustomProgressBar',
	props: {
		title: {
			type: String,
			default: '资产排行(Top 10)'
		},
		chartData: {
			type: Array,
			default: () => [],
			required: true
		}
	},
	computed: {
		sortedChartData() {
			return [...this.chartData].sort((a, b) => b.Count - a.Count)
				.slice(0, 10); // 只取前10条数据
		},
		maxCount() {
			return Math.max(...this.sortedChartData.map(item => item.Count));
		}
	},
	methods: {
		formatDuration,
		getPercentage(count) {
			if (this.maxCount === 0) return 0;
			return Math.round((count / this.maxCount) * 100);
		},
		getProgressStyle(index) {
			const colors = [
				'#ff7734',  // 第一名
				'#ffc700',  // 第二名
				'#e0a449'  // 第三名
			];
			const defaultColor = '#3fd190';  // 其他名次
			const backgroundColor = index < 3 ? colors[index] : defaultColor;

			return {
				width: '100%',
				'--el-progress-bar-color': backgroundColor
			};
		},
		getIndexStyle(index) {
			const colors = [
				'#ff7734',  // 第一名
				'#ffc700',  // 第二名
				'#e0a449'  // 第三名
			];
			const defaultColor = '#3fd190';  // 其他名次
			const backgroundColor = index < 3 ? colors[index] : defaultColor;

			return {
				backgroundColor: backgroundColor
			};
		}
	}
}
</script>

<style lang="scss" scoped>
.wrap {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 6px;
	margin: 0 auto;
	padding-bottom: 16px;
	height: 100%; 
	overflow: hidden;
}

.title {
	flex-shrink: 0; 
	padding-bottom: 8px;
}

.progress-wrapper {
	display: flex;
	align-items: center;
	padding: 8px;
	min-height: 10px;
	box-sizing: border-box;
}

.index-square {
	color: white;
	width: 20px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	flex-shrink: 0; /* Prevent shrinking */
	@media (min-width: 1921px) {
		font-size: 16px;
    width: 30px;
		height: 30px;
  }
}

.label {
	color: #525252;
	font-size: 14px;
	word-break: break-word; /* Allow text to wrap */
	@media (min-width: 1921px) {
		font-size: 16px;
  }
}

.progress-container {
	flex-grow: 1;
	margin-left: 8px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

.progress-text {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-bottom: 4px;
}

.percentage {
	color: #525252;
	font-size: 14px;
	@media (min-width: 1921px) {
    font-size: 16px; /* 宽度大于1920px时字体大小为16px */
  }
}

::v-deep .el-progress-bar__outer {
	background-color: #E5E9F2;
	height: 4px; /* Match stroke-width */
	@media (min-width: 1921px) {
    height: 16px;
  }
}

::v-deep .el-progress-bar__inner {
	background: var(--el-progress-bar-color);
}
</style>